<template>
    <div class="app-container">
      <!-- START 卡片视图 START -->
      <el-card style="margin-bottom: 10px;">
        <!-- START 搜索与添加按扭区域 START -->
        <el-form ref="queryForm" :inline="true">
          <el-form-item label="创建时间" prop="beginTime">
            <el-date-picker
              v-model="createTime"
              size="small"
              style="width: 260px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              size="mini"
              @click="getMyTaskList"
            >搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!--  END 搜索与添加按扭区域 END -->
      </el-card>
      <!-- END 卡片视图 END -->
  
      <!-- START 我的待办任务表格区域 START -->
      <el-card>
        <el-table
          v-loading="listLoading"
          :data="taskList"
          fit
          border
          highlight-current-row
          style="width: 100%;"
          @sort-change="sortChange"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="任务ID" prop="id" sortable="custom" align="center" width="310">
            <template slot-scope="{row}">
              <span>{{ row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="待办任务名称" :show-overflow-tooltip="true" width="230px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" :show-overflow-tooltip="true" width="190px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="办理人" width="120px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.assignee }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center" width="340" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <el-button type="warning" icon="el-icon-check" size="mini" plain round @click="doTask(row.id)">
                办理任务
              </el-button>
              <el-button type="primary" icon="el-icon-search" size="mini" plain round>
                查看流程图
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="totalCount>0" :total="totalCount" :page.sync="queryParams.currPageNo" :limit.sync="queryParams.pageSize" @pagination="getMyTaskList" />
      </el-card>
      <!-- END 我的待办任务表格区域 END -->

      <!--START 办理任务 START -->
<el-dialog title="办理任务" :visible.sync="dialogFormVisible" width="680px">
    <el-form ref="dataFormRef" :model="leaveBill" label-position="left">
      <el-row>
        <el-col :span="24">
          <el-form-item label-width="90px" label="请假标题" prop="title">
            <el-input v-model="leaveBill.title" readonly size="medium" placeholder="请输入请假标题" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="25">
        <el-col :span="9">
          <el-form-item prop="begintime" label-width="90px" label="开始时间">
            <el-date-picker
              v-model="leaveBill.begintime"
              value-format="yyyy-MM-dd"
              type="date"
              readonly
              style="width: 150px"
              placeholder="请输入请假时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item prop="endtime" readonly label-width="80px" label="结束时间">
            <el-date-picker
              v-model="leaveBill.endtime"
              value-format="yyyy-MM-dd"
              style="width: 150px"
              type="date"
              readonly
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="请假天数" label-width="80px" prop="days">
            <el-input v-model="leaveBill.days" style="width:60px" readonly size="medium" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="请假原因" label-width="90px" prop="content">
            <el-input
              v-model="leaveBill.content"
              type="textarea"
              readonly
              :autosize="{ minRows: 2, maxRows: 6}"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="批注内容" :show-overflow-tooltip="true" label-width="90px">
            <el-input
              v-model="leaveBill.message"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 6}"
              placeholder="请输入批注信息"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="margin-bottom: 20px;" class="dialog-footer" align="center">
      <el-button v-for="(value ,index) in outcomes" :key="index" size="mini" type="primary" @click="completeTask">
        {{ value }}
      </el-button>
    </div>

  <!-- START 批注表格 START-->
    <el-table
      :data="comments"
      fit
      border
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="批注人" prop="id" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.userId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="批注内容" :show-overflow-tooltip="true" width="378px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.message }}</span>
        </template>
      </el-table-column>
      <el-table-column label="批注时间" width="160px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.time }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- END 批注表格 END-->
</el-dialog>
<!--END 办理任务 END -->

    </div>
  </template>
<script>
import {getMyTaskList,queryLeaveBillByTaskId,queryOutcomeByTaskId,loadAllComments,doTask} from '@/api/processManage.js'
import Pagination from '@/components/Pagination'
export default {
    components:{
        Pagination
    },
    data:function(){
        return {
            // 查询条件： 创建时间
            createTime: [],
            queryParams: {
                // 开始时间
                beginTime: '',
                // 结束时间
                endTime: '',
                currPageNo: 1,
                pageSize: 2,
                sort: '+id'
            },
            // 正在加载中
            listLoading: false,
            // 我的待办任务列表
            taskList: [],
            // 总记录数
            totalCount: 0,
            // 控制办理任务对话框的显示与隐藏
            dialogFormVisible: false,
            // 保存请假单对象信息
            leaveBill: {},
            // 保存办理任务对话框中的按扭组
            outcomes: [],
            // 批注列表
            comments: [],
            // 当前处理的任务ID
            currTaskId: 0,
            // 批注内容
            comment: ''

        }
    },
    mounted(){
        this.getMyTaskList();
    },
    methods:{
        getMyTaskList(){
            //开启加载动画
            this.listLoading=true;

            if(this.createTime!=null &&this.createTime.length>0){
                this.queryParams.beginTime=this.createTime[0];
                this.queryParams.endTime=this.createTime[1];
            }

            //发送ajax请求查询我的待办任务
            getMyTaskList(this.queryParams)
                .then((res)=>{
                    //1.关闭加载动画
                    this.listLoading=false;
                    //2.在table组件中显示待办任务数据
                    this.taskList=res.data.list;
                    //3.在page组件显示分页效果
                    this.totalCount=res.data.totalCount;
                }).catch((err)=>{
                    console.log(err);
                })
        },
        //完成任务
        doTask(taskId){
          this.currTaskId=taskId;
           //显示模态框
           this.dialogFormVisible=true;
          //查询请假单数据
          queryLeaveBillByTaskId(taskId)
            .then((res) => {
              this.leaveBill = res.data
            })
            .catch((err) => {
              this.$message.error(err)
            })
          //查询当前任务节点的连线
          queryOutcomeByTaskId(taskId)
            .then((res) => {
              this.outcomes = res.data
            })
            .catch((err) => {
              this.$message.error(err)
            })
          //查询批注列表
          loadAllComments(taskId)
            .then((res) => {
              this.comments = res.data
            })
            .catch((err) => {
              this.$message.error(err)
            })
        },
        //完成任务
        completeTask(){
          let param={taskId:this.currTaskId,
            outcome: event.target.innerText,
            comment:this.comment,
            id: this.leaveBill.id}
          doTask(param)
            .then((res)=>{
              //1.关闭模态框
              this.dialogFormVisible=false
              if(res.code==200){
                //2.给出友好提示
                this.$message({
                    type: 'success',
                    title: '提示',
                    message: res.message,
                    duration: 2000
                })
                //3.刷新列表
                this.getMyTaskList()
              }
            })
            .catch((err)=>{
              console.log(err);
            })
        }
    }
}
</script>
  